<template>
  <div>
    <div class="header">
      <img src="../assets/wangyiyun.png" alt="" class="img1">
    </div>
    <van-tabs v-model="activeName">
  <van-tab title="推荐音乐" name="a"><HotMusic></HotMusic></van-tab>
  <van-tab title="热歌榜" name="b"><Music></Music></van-tab>
  <van-tab title="搜索" name="c"><Search></Search></van-tab>
</van-tabs>
  </div>
</template>

<script>
import HotMusic from '@/components/HotMusic.vue'
import Music from '../components/Music.vue'
import Search from '@/components/Search.vue'

export default {
  name: 'HomeView',
  data () {
    return {
      activeName: 'a'
    }
  },
  components: {
    HotMusic,
    Music,
    Search
  }
}
</script>
<style lang="less" scoped>
.header{
  position: relative;
  background-color: #d43c33;
  height: 5rem;
  .img1{
    position: absolute;
    top:31%;
  }
}
/deep/.van-tabs__wrap{
  border-bottom: 1px solid #c5bdbd;
}
</style>
